<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>模型故障列表</title>
  <link rel="stylesheet" href="../../static/css/layui.css" th:href="@{/css/layui.css}" media="all">
  <link rel="stylesheet" href="../../static/css/style.css" th:href="@{/css/style.css}">
  <link rel="stylesheet" href="../../static/ajax/libs/select2/select2.min.css"
    th:href="@{/ajax/libs/select2/select2.min.css}">
  <link rel="stylesheet" href="../../static/ajax/libs/select2/select2-bootstrap.min.css"
    th:href="@{/ajax/libs/select2/select2-bootstrap.min.css}">
  <link rel="stylesheet" href="../../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}">
  <link rel="stylesheet" href="../../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}">
  <link rel="stylesheet" href="../../static/ajax/libs/jquery-ztree/3.5/css/metro/zTreeStyle.css"
    th:href="@{/ajax/libs/jquery-ztree/3.5/css/metro/zTreeStyle.css}" />
  <link rel="stylesheet" href="../../static/ajax/libs/jquery-layout/jquery.layout-latest.css"
    th:href="@{/ajax/libs/jquery-layout/jquery.layout-latest.css}" />
  <link rel="stylesheet" href="../../static/ajax/libs/bootstrap-table/bootstrap-table.min.css"
    th:href="@{/ajax/libs/bootstrap-table/bootstrap-table.min.css}">
  <link rel="stylesheet" href="../../static/css/animate.min.css" th:href="@{/css/animate.min.css}">
  <link rel="stylesheet" href="../../static/ruoyi/css/ry-ui.css" th:href="@{/ruoyi/css/ry-ui.css}">
  <link rel="stylesheet" href="../../static/css/add.css" th:href="@{/css/add.css}">
  <link rel="stylesheet" href="../../static/css/equipment.css" th:href="@{/css/equipment.css}">
  <link rel="stylesheet" href="../../static/css/oy-jichu.css" th:href="@{/css/oy-jichu.css}" />
  <link rel="stylesheet" href="../../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}" />
  <link rel="stylesheet" href="../../static/ajax/libs/layui/css/modules/laydate/default/laydate.css">
  <th:block th:include="include :: layout-latest-css" />
  <th:block th:include="include :: ztree-css" />
  <!-- 工作树样式 -->
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
      list-style: none;
      font-size: 13px
    }

    #container {
      /* width: 300px; */
      height: auto;
      /* border: 1px solid #e4e4e4; */
      text-align: center;
      margin-right: auto;
      margin-left: auto;
      margin-top: 50px;
      padding: 10px;
    }

    .second-wrapper {
      margin: 10px 0 10px 20px;
      display: none;
    }

    .three-wrapper {
      margin: 10px 0 10px 20px;
      display: none;
    }

    .active {
      background: #ddecfa;
      color: #1c93ec;
    }

    .second-active {
      background-color: #f3f3f3;
      color: #5894bf;
    }

    .search {
      position: absolute;
      right: 20px;
      top: 7px;
      width: 25px;
      height: 25px;
    }
    .layui-panel {
      border-radius: 5px;
      padding: 10px;
      margin: 10px;
      box-sizing: border-box;
    }
    /* .nav:hover{
        color: #1c93ec;
      } */
    .container-fluid {
      padding-right: 15px;
      padding-left: 15px;
    }
    .layui-panel {
      margin-top: 10px !important;
      border-radius: 5px;
      padding: 10px;
      box-sizing: border-box;
    }
    .container-fluid {
      padding-left: 0px !important;
      padding-right: 0px !important;
    }
  </style>
</head>

<body>
  <div class="bx container-fluid">
          <!-- 表格 -->
          <div class="tablebox layui-panel" style="margin-top: 20px;">
            <table id="table" lay-filter="test"></table>
            <div id="pages" style="margin-left: 30%;"></div>
            <script type="text/html" id="toolEventDemo">
              <a class="layui-btn layui-btn-xs" id="errDetail" lay-event="errDetail">
                <i class="fa fa-search"></i>
                故障详情
              </a>
            </script>
          </div>

        </div>
      </div>
    </div>

  </div>
  <script src="../../static/js/jquery.min.js"></script>
  <script src="../../static/js/bootstrap.min.js"></script>
  <script src="../../static/ajax/libs//layui/layui.min.js"></script>
  <script src="../../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
  <script src="../../static/js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script>
  <script src="../../static/ajax/libs/jquery-ztree/3.5/js/jquery.ztree.all-3.5.js"
    th:src="@{/ajax/libs/jquery-ztree/3.5/js/jquery.ztree.all-3.5.js}"></script>
  <script src="../../static/ajax/libs/jquery-layout/jquery.layout-latest.js"
    th:src="@{/ajax/libs/jquery-layout/jquery.layout-latest.js}"></script>

  <script src="../../static/ajax/libs/blockUI/jquery.blockUI.js"
    th:src="@{/ajax/libs/blockUI/jquery.blockUI.js}"></script>
  <script src="../../static/ajax/libs/iCheck/icheck.min.js" th:src="@{/ajax/libs/iCheck/icheck.min.js}"></script>
  <script src="../../static/ajax/libs/layer/layer.min.js" th:src="@{/ajax/libs/layer/layer.min.js}"></script>
  <!-- <script src="../../../static/ajax/libs/layui/layui.min.js" th:src="@{/ajax/libs/layui/layui.min.js}"></script> -->
  <script src="../../static/ruoyi/js/common.js" th:src="@{/ruoyi/js/common.js}"></script>
  <script src="../../static/ruoyi/js/ry-ui.js" th:src="@{/ruoyi/js/ry-ui}"></script>
  <script src="https://www.jq22.com/jquery/jquery-1.9.1.js"></script>
  <script src="../../static/js/layui.js" th:src="@{/js/layui.js}"></script>
  <script type="text/javascript">
    // 树形结构
    let pageSize;
    let pageNum;
    let total;//总数
    var page = { pageSize: 10, pageNum: '' }
    $(function () {
      $.ajax({
        url: '/youtian/record/list',
        type:'GET',
        data: page,
        success: function (res) {
          tableList(res)
        }
      })
    }) 
    let recordId; //当前行表格数据的id
    //表格
    function tableList(data) {
      console.log(data);
      let tableData = data.rows
      // console.log(tableData);
      total = data.total
      // console.log(tableData);
      layui.use(['table', 'laypage'], function () {
        var table = layui.table;
        var laypage = layui.laypage;
        table.render({
          elem: '#table',
          height: 430,
          // page: true,
          // limit: 10,
          // limits: [5, 10, 15, 20],
          cols: [
            [
              { type: 'checkbox', field: 'left', title: '序号', width: '10%', unresize: true, align: 'center' },
              { field: 'recordName', title: '故障名称', width: '40%', unresize: true, align: 'center' },
              { field: 'createBy', title: '时间', unresize: true,width: '30%', align: 'center' },
              { field: 'set', title: '操作', templet: "#toolEventDemo", width: '20%', sort: false, unresize: true, align: 'center' }
            ]
          ],
          data: tableData
        });
        table.on('tool(test)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
          var data = obj.data //获得当前行数据
          layEvent = obj.event; //获得 lay-event 对应的值
          recordId = obj.data.recordId    //当前行的templateId
          recordName = obj.data.recordName
          createBy = obj.data.createBy
          //复制的弹框
          if(layEvent === 'errDetail'){
            window.location.href = `/page-route/fault-analysis-table?recordId=${recordId}&recordName=${recordName}&createBy=${createBy}`
          }
        });
        laypage.render({
          elem: 'pages', //注意，这里的 test1 是 ID，不用加 # 号
          count: data.total, //数据总数，从服务端得到
          curr: page.pageNum,
          layout: ['prev', 'page', 'next', 'skip'],
          limit: page.pageSize,
          jump: function(obj, first){
          //obj包含了当前分页的所有参数，比如：
            console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
            console.log(obj.limit); //得到每页显示的条数
            page.pageSize = obj.limit
            page.pageNum = obj.curr
            console.log(page, 'page');
            //首次不执行
            if(!first){
              //do something
              $.ajax({
                url: '/youtian/record/list',
                type:'GET',
                data: page,
                success: function (res) {
                  tableList(res)
                  console.log(res, 'res');
                }
              })
            }
          }
        });
      })
    }



  </script>
</body>

</html>